<template>
    <div class="main-container">
        <div class="main-content">
            <slot></slot>
        </div>
    </div>
</template>

<style scoped>
/* App.vue */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


.main-container {
    flex: 1; /* 填充剩余空间 */
    margin-top: 67px;
    position: relative;
    width: 100vw; /* 满屏宽度 */
    min-height: calc(100vh - 67px); /* 精确计算高度 */
    padding-bottom: 50px; /* 根据实际底部高度调整 */
    background: #f8f9fa; 
}



.main-content {
    position: relative;
    z-index: 1;
    width: 80%; /* 相对宽度 */
    max-width: 1200px; /* 最大限制 */
    min-height: 90vh;
    margin: 0 auto; /* 替代justify-content */
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(255,85,0,0.08); /* 闲鱼风格投影 */
    padding: 24px;
    box-sizing: border-box;
}


</style>